<template>
  <div class="productHead">
    <div class="head">
      <div class="store">
        <img :src="collectData.shopLogo" @click="toStore(collectData.shopId)" alt="logo" />
        <div class="desc">
          <p class="storeName">{{ collectData.shopName }}</p>
          <div class="sales">
            <span class="species">商品种类：<span>{{ collectData.classifyNumber }}</span></span>
            <span class="sold">已售：<span>{{ collectData.number }}</span></span>
          </div>
        </div>
        <div class="service" v-show="haveService">
          <div class="item">
            <svg-icon
              style="width: 30px;height: 30px;"
              name="shop-service"
            />
            <span class="fs12">微信客服</span>
          </div>
          <canvas class="qrcode" ref="headQrcodeRef"></canvas>
        </div>
      </div>
      <div class="search">
        <div class="searchSelect">
          <el-dropdown
            @command="searchCommand"
            trigger="click"
          >
            <span class="el-dropdown-link">{{ search.type }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="宝贝">宝贝</el-dropdown-item>
                <el-dropdown-item command="店铺">店铺</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="searchRight">
          <input
            type="text"
            v-model="search.keyword"
            maxlength="20"
            @keyup.enter="searchPro"
            placeholder="请输入搜索商品"
          />
        </div>
        <svg-icon class="searchIcon" name="search" @click="searchPro" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, nextTick, onBeforeMount, reactive, ref, toRefs, shallowRef, watch } from 'vue'
import { useShop } from '@/store/shop'
import { ArrowDown } from '@element-plus/icons-vue'
import QRCode from 'qrcode'
import SvgIcon from '@/components/svgIcon/index.vue';
import {
  getServiceURL
} from '@/api/product.js'
import { useRouter } from 'vue-router'

defineComponent({
  name: 'ProductHead'
})
const shopStore = useShop()
const { collectData } = toRefs(shopStore)
const router = useRouter()
const search = reactive({
  type: '宝贝',
  keyword: '',
})

function searchCommand (command) {
  search.type = command;
}
// 搜索商品
function searchPro () {
  shopStore.setSearchObj({
    keyword: search.keyword,
    searchVal: search.type
  })
  if (router.currentRoute.value.name !== "search") {
    router.push({
      path: "/activity/search"
    });
  }
}
// 跳转到店铺
function toStore (id) {
  router.push({
    path: "/store",
    query: { shopId: id }
  });
}

/**
 * 客服部分
 */
let haveService = shallowRef(false);
// 绘制客服二维码
const headQrcodeRef = ref();
function setQRCode (content) {
  nextTick(() => {
    QRCode.toCanvas(headQrcodeRef.value, content, error => {
      console.log(error);
    });
  })
}

// 获取客服信息
function getSercvice (shopid) {
  const shopids = JSON.parse(sessionStorage.getItem("service_shopds")) || [];
  const serviceUrl = JSON.parse(sessionStorage.getItem("service_url")) || [];
  let url = null;
  const index = shopids.indexOf(shopid);
  if (index === -1) { // 没用该店铺客服
    getServiceURL({ id: shopid }).then(response => {
      const res = response.data;
      url = res.data.url;
      if (!url) {
        return;
      }
      // 缓存处理
      shopids.push(shopid);
      serviceUrl.push(url);
      haveService.value = true;
      sessionStorage.setItem("service_shopds", JSON.stringify(shopids));
      sessionStorage.setItem("service_url", JSON.stringify(serviceUrl));
    })
  }
  else {
    haveService.value = true;
    url = serviceUrl[index];
  }
  if (!url) {
    return;
  }
  setQRCode(url);
}

watch(
  () => collectData.value,
  (nVal, oVal) =>  {
    if (nVal !== oVal) {
      haveService.value = false; // 初始化微信客服框
      getSercvice(nVal.shopId);
    }
  }
)
onBeforeMount(() => {
  getSercvice(collectData.value.shopId);
})
</script>

<style lang="scss" scoped>
.productHead{
  width: 100%;
  background-color: #fff;
  height: 80px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  .head{
    width: 1250px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .store{
      display: flex;
      img{
        width: 60px;
        height: 60px;
        margin-right: 10px;
        border: 1px solid #F3F4F5;
        cursor: pointer;
      }
      .desc{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px 0;
        .storeName{
          font-size: 18px;
          color: #333;
        }
        .sales{
          font-size: 12px;
          .species,.sold{
            color: #999;
            margin-right: 15px;
            span{
              color: #333;
            }
          }
        }
      }
      .service{
        width: 58px;
        height: 58px;
        color: #C5AA7B;
        background-color: #FAF8F5;
        // overflow: hidden;
        cursor: pointer;
        &:hover{
          .qrcode{
            display: block;
          }
        }
        .item{
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          span{
            margin-top: 6px;
          }
        }
        .qrcode{
          width: 100px !important;
          height: 100px !important;
          display: none;
          z-index: 999;
        }
      }
    }
    .search{
      width: 394px;
      height: 39px;
      border: 2px solid #F3F4F5;
      display: flex;
      .searchSelect{
        $height: 30px;
        width: 82px;
        height: $height;
        line-height: $height;
        margin-top: 2px;
        border-right: 1px solid #CCCCCC;
        text-align: center;
        .el-dropdown{
          line-height: $height;
          color: #C5AA7B;
          .el-dropdown-link {
            cursor: pointer;
            color: var(--el-color-primary);
            display: flex;
            align-items: center;
          }
        }
      }
      .searchRight{
        flex: 1;
        input{
          padding-left: 15px;
          font-size: 14px;
          color: #333;
          line-height: 35px;
        }
      }
      .searchIcon{
        cursor: pointer;
        width: 30px;
        height: 30px;
        margin: 2px 5px;
      }
    }
  }
}
</style>
